<template>
<view>
<!--pages/wcs/privil-card/pricard-detail/pricard-detail.wxml-->

<view class="pri-card">
    <!-- <view class='card-item'>
        <image src='../../../images/dist_list.png'></image>
        <view class='card-text'>                       
            <view class='card-txttit'>
                <image src='../../../images/icon.png'></image>
                <text class='big-txt'>{{data.level_name}}</text>
            </view>
            <text class='sm-txt'>{{data.introduction}}</text>
            <text class='cad-price'>￥{{data.join_price}}元</text>
        </view>
    </view> -->
    <view class="pri-list">
        <view class="pri-item">
            <!-- <view class='pri-tit'><text class='pri-count'>01</text><text class='pri-name'>特权标题</text></view> -->           
                 <!--<import src="../../../utils/wxParse/wxParse.wxml"></import>-->
                 <view class="pri-txt"> <jyf-parser :html="article_content"></jyf-parser></view>                          
        </view>

    </view>
</view>
<view class="pri-interests">
    <!-- <view class='inter-t1'><image src='../../../images/icon-pri.png'></image><text>支付权益</text></view>
    <view class='inter-t2'>
      <text>支付权益购买后七日内无条件可退款</text>
      <text>特权有效期：1年</text>
      <text>我司拥有会员卡最终解释权</text>
    </view> -->
    <view class="inter-t3">
        <view @tap.stop="payment">立即支付</view>
        <!-- <button open-type='contact'>咨询客服</button> -->
    </view>
</view>
</view>
</template>

<script>
// pages/distribut/distribut_detail/distribut_detail.js
var app = getApp();
var request = app.globalData.request;

var common = require("../../../utils/common.js");
var pay = require("../../../utils/pay.js");

export default {
  data() {
    return {
      data: null,
      article_content: ""
    };
  },

  components: {},
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this;
    request.get('/api/distribut/distribut_list?id=' + options.id, {
      success: function (res) {
        //WxParse.wxParse('content', 'html', res.data.result.level_intro, that, 6)
        setTimeout(() => {
          that.article_content = res.data.result.level_intro;
        }, 200); //网页中的图片加上域名

        common.wxParseAddFullImageUrl(that, 'content');
        that.setData({
          data: res.data.result
        });
      }
    });
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {},

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {},

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {},

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {},

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {},

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {},
  methods: {
    payment: function () {
      //检查用户是否登录方可操作立即购买
      if (!app.globalData.auth.isAuth()) {
        app.globalData.showLoading(null, 1500);
        app.globalData.getUserInfo();
        return;
      }

      var that = this;
      var data = {
        level_id: that.data.level_id
      };
      request.post('/api/cart/buy_upgrade', {
        data: data,
        success: function (res) {
          Object.assign(data, {
            order_sn: res.data.result
          });
          pay.distribut(data, function () {
            uni.navigateBack();
          });
        },
        failStatus: function (res) {
          if (res.data.status == -1) {
            app.globalData.showWarning(res.data.msg);
          }

          return false;
        }
      });
    }
  }
};
</script>
<style>
/* pages/wcs/privil-card/pricard-detail/pricard-detail.wxss */
page{
    padding-bottom: 100rpx;
}
.pri-card{
  padding: 30rpx 30rpx 0 30rpx;
  min-height: 360rpx;
  overflow: hidden;
}
.card-item{
  width: 100%;
  height: 340rpx;
  margin-bottom: 40rpx;
  position: relative;
}
.card-item image{
  width: 100%;
  height: 100%;
}
.card-text{
  display: block;
  width: 570rpx;
  position: absolute;
  left: 0;
  top: 0;
  padding: 50rpx 60rpx 0;
}
.card-text image{
  width: 72rpx;
  height: 50rpx;
  vertical-align: bottom;
}
.card-text .big-txt{
  display: inline-block;
  font-size: 36rpx;
  line-height: 36rpx;
  margin-left: 30rpx;
  font-weight: bold;
  vertical-align: bottom;
}
.card-text .sm-txt{
  font-size: 30rpx;
  display: block;
  margin: 30rpx 0 70rpx 100rpx;
}
.card-text .cad-price{
  float: right;
}
.card-text text,.pri-item .pri-tit text{
  background: linear-gradient(0deg, #f2d87f, #fff0bb);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* .pri-list{
  padding: 60rpx 30rpx 0;
} */
.pri-item{
  margin-bottom: 80rpx;
}
.pri-item .pri-tit{
  overflow: hidden;
}
.pri-item .pri-tit text{
  float: left;
}
.pri-tit .pri-count{
  font-size: 80rpx;
  line-height: 80rpx;
}
.pri-tit .pri-name{
  font-size: 36rpx;
  line-height: 36rpx;
  vertical-align: bottom;
  margin-left: 30rpx;
  margin-top: 36rpx;
}
.pri-item .pri-txt{
  margin-top: 20rpx;
  display: block;
  font-size: 26rpx;
  color: #dddbe4;
  line-height: 42rpx;
  text-align: justify;
}
/* .pri-interests{
  padding: 40rpx 30rpx 80rpx;
} */
.inter-t1 image{
  width: 44rpx;
  height: 44rpx;
}
.inter-t1 text{
  font-size: 36rpx;
  color: #262626;
  margin-left: 20rpx;
}
.inter-t2{
  padding-left: 64rpx;
}
.inter-t2 text{
  display: block;
  font-size: 26rpx;
  line-height: 36rpx;
  color: #666;
  margin-top: 20rpx;
}
.inter-t3{
  overflow: hidden;
  text-align: center;
  margin-top: 60rpx;
  display:flex;
  position: fixed;
  bottom: 60rpx;
  justify-content:center;
  width:100%;
}
.inter-t3 view{
  display: inline-block;
  width: 500rpx;
  height: 72rpx;
  line-height: 72rpx;
  /*color: #ffe690;*/
  font-size: 28rpx;
  /*background-color: #2c2b2d;*/
  color: white;
    background-color: #ff6a00;
  border-radius: 10rpx;
}
.inter-t3  button{
  display: inline-block;
  width: 200rpx;
  height: 72rpx;
  line-height: 72rpx;
  color: #ffe690;
  font-size: 28rpx;
  background-color: #2c2b2d;
  border-radius: 10rpx;
}
.inter-t3 button:last-of-type{
  margin-left: 80rpx;
}
 .pri-txt view .wxParse-img{
    width:100% !important;
}
























































</style>